<template>
    <div>
      <el-form size="small" label-width="80px">
        <el-form-item label="附件" v-if="fileList.length > 0">
          <el-upload
            action=""
            class="upload-demo"
            :disabled="true"
            :on-preview="handlePreview"
            :file-list="fileList">
          </el-upload>
        </el-form-item>
      </el-form>
      <div :style="{marginBottom: '10px', border: '1px solid', padding: '10px', borderRadius: '10px', marginTop: index === 0 ? '15px' : ''}" v-for="(contrast, index) in contrastProductTable">
        <el-form ref="form" label-width="80px" :inline="true">
          <el-form-item label="比价单">
            {{contrast.orderCode}}
          </el-form-item>
          <el-form-item label="厂家">
            {{contrast.manufacturerName}}
          </el-form-item>
          <el-form-item label="交货期">
            {{contrast.jhValid}}
          </el-form-item>
          <el-form-item label="总价">
            {{contrast.allPrice}}
          </el-form-item>
        </el-form>
        <h3>商品信息</h3>
        <el-table label="序号" :data="contrast.products" :row-class-name="tableRowClassName">
          <el-table-column type="index" width="55" align="center"/>
          <el-table-column label="产品编码" align="center" prop="productCode" :show-overflow-tooltip="true"/>
          <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
          <el-table-column label="产品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
          <el-table-column label="计数单位" align="center" prop="unitName" />
          <el-table-column label="商品数量" align="center" prop="productNum" />
          <el-table-column label="商品单价" align="center" prop="onlyPrice" />
          <el-table-column label="商品总价" align="center" prop="allPrice" />
        </el-table>
      </div>
    </div>
</template>

<script>
import { getPriceComparisonAuditInfo } from "@/api/wms/auditOrder";

export default {
  name: "ComparisonProduct",
  props: {
    auditId: {
      type: Number,
      default: null
    },
    openFlag: {
      type: Boolean
    }
  },
  data() {
    return {
      prefix: process.env.VUE_APP_BASE_API,
      loading: false,
      contrastProductTable: [],
      valid: null,
      fileList: []
    }
  },
  created() {
    this.getAuditInfo()
  },
  methods: {
    getAuditInfo() {
      this.loading = true
      getPriceComparisonAuditInfo({id: this.auditId}).then(res => {
        if (res.code === 200) {
          let data = res.data
          this.contrastProductTable = data.priceComparisonOrders

          let accessoryList = data.accessoryList;
          if (accessoryList && accessoryList.length > 0) {
            accessoryList.forEach(item => {
              let urls = item.split("/")
              this.fileList.push({name: urls[urls.length - 1], url: this.prefix + item})
            })
          }

          this.valid = data.valid
          this.ratio = data.ratio
        }
      }).finally(e => {
        this.loading = false
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.isSelected) {
        return 'success-row';
      }
      return '';
    },
    // 文件点击事件
    handlePreview(file){
      window.open(file.url,'_blank');
    },
  },
  watch:{
    openFlag: {
      handler(nval, oldval){
        if (nval){
          this.selectedProductList = []
          this.getAuditInfo()
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-table .success-row {
  background: #f0f9eb;
}
</style>
